import './Research.scss';
import { researchStore } from '../../stores/ResearchStore';
import { observer } from 'mobx-react';
import { useEffect } from 'react';
import { Input, Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import ResearchItemPage from './ResearchItem';
import eventBus from '../../utils/eventBus';
import { ResearchNav } from './ResearchNav';
import { News_Bg_Img } from '../../images/NewsBg';


const { Search } = Input;
export const Research = observer(() => {
    useEffect(() => {
        researchStore.getData();
    }, []);
    let list: any = researchStore.list;
    console.log("list ${list}",list.length);
    let left = list.length % 4;
    for (let i = 0; i < left; i++) {
        list.push(undefined);
    }
    eventBus.addListener('toBottom', () => {
        researchStore.getData(true);
    })
    return (
        <div className="researchWrapper">
            <header id="hero-overlay" className="hero-overlay wf-section" style={{ backgroundImage: `url('${News_Bg_Img}')`, backgroundPositionY: '-50px', backgroundSize: '100%' }}>
                <div className="centered-container w-container">
                    <p className="paragraph-9">o•li Researches</p>
                    {/* <h1 className="heading-18">News, events and posts by the <br />o•li team</h1> */}
                </div><img
                    src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fc469839b588b8fabf84815_bottom_lightblue.svg"
                    loading="lazy" alt="" className="image-24" />
            </header>
            <div className="contentWrapper">
                <ResearchNav />
                <ul className="researchContent">
                    {researchStore.loading ? <div className="loading">
                        <Spin indicator={<LoadingOutlined style={{ fontSize: 40 }} />} />
                    </div> : researchStore.list.map((item, idx) => {
                        if (!item) {
                            return <li className="item"></li>
                        }
                        return <ResearchItemPage item={item} key={idx} />
                    })
                    }
                </ul>
                {researchStore.loadingMore && <div className="loadmore">
                    <Spin indicator={<LoadingOutlined style={{ fontSize: 30 }} />} />
                </div>}
            </div>

        </div>
    )
});